import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/page/login/forget_pwd_controller.dart';

import '../../widget/custom_button.dart';

class BuildForgetPwdPage extends StatelessWidget {
  const BuildForgetPwdPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      init: ForgetPwdController(),
      builder: (controller) => Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/page_bg.png"),
                fit: BoxFit.fill)),
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          extendBodyBehindAppBar: true,
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0,
            foregroundColor: Colors.transparent,
            backgroundColor: Colors.transparent,
          ),
          body: Stack(
            children: [
              Positioned(
                top: 218.h,
                left: 64.w,
                child: _buildSignText(controller),
              ),
              Positioned(
                top: 400.h,
                left: 24.w,
                child: _buildCenterWidget(controller),
              )
            ],
          ),
        ),
      ),
    );
  }

  ///标识文本组件
  _buildSignText(ForgetPwdController controller) {
    return Obx(
      () => Row(
        children: [
          InkWell(
            child: Image.asset(
              "assets/images/login_back_icon.png",
              width: 48.w,
              height: 48.w,
            ),
            onTap: () => Get.back(),
          ),
          Text(
            controller.isInputPhonePage.value ? "忘记密码" : "请输入验证码",
            style: TextStyle(fontSize: 48.sp, fontWeight: FontWeight.w600),
          )
        ],
      ),
    );
  }

  ///中间组件
  _buildCenterWidget(ForgetPwdController controller) {
    return Container(
      height: 1224.h,
      width: 702.w,
      padding: EdgeInsets.only(
        left: 40.w,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(48.w),
          topRight: Radius.circular(48.w),
        ),
      ),
      child: Stack(
        children: [
          Positioned(
            top: 120.h,
            child: _buildStatusWidget(controller),
          ),
          Positioned(
            top: 242.h,
            child: SizedBox(
              width: 622.w,
              child: _buildPhoneWidget(controller),
            ),
          ),
          Positioned(
            top: 456.h,
            child: _buildBottomWidget(controller),
          ),
        ],
      ),
    );
  }

  ///状态组件
  Widget _buildStatusWidget(ForgetPwdController controller) {
    return Obx(
      () => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Image.asset(
                  controller.isInputPhonePage.value
                      ? "assets/images/login_no_send_code_icon.png"
                      : "assets/images/login_had_send_code_icon.png",
                  width: 40.h,
                  height: 40.h),
              Text(
                controller.isInputPhonePage.value
                    ? "请输入注册手机号码"
                    : "验证码已发送至注册手机号",
                style: TextStyle(fontSize: 36.sp),
              )
            ],
          ),
          Visibility(
            visible: !controller.isInputPhonePage.value,
            child: Container(
              padding: EdgeInsets.only(left: 40.h),
              child: Text(
                controller.processedPhone.value,
                style: TextStyle(
                  fontSize: 28.sp,
                  color: const Color(0xFF999999),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  ///手机号或验证码组件
  Widget _buildPhoneWidget(ForgetPwdController controller) {
    return Obx(
      () => TextField(
        controller: controller.isInputPhonePage.value
            ? controller.phoneController
            : controller.codeController,
        keyboardType: TextInputType.number,
        onChanged: (_) => controller.observerText(),
        inputFormatters: controller.isInputPhonePage.value
            ? [LengthLimitingTextInputFormatter(11)]
            : [LengthLimitingTextInputFormatter(6)],
        decoration: InputDecoration(
          enabledBorder: const UnderlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFFF2F0F0),
            ),
          ),
          focusedBorder: const UnderlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFFF2F0F0),
            ),
          ),
          hintText: controller.isInputPhonePage.value ? "请输入手机号码" : "请输入验证码",
          suffixIcon: Visibility(
            visible: !controller.isInputPhonePage.value,
            child: InkWell(
              onTap: () =>
                  controller.canSendCode.value ? controller.getCode() : {},
              child: Container(
                padding: EdgeInsets.only(top: 16.h, bottom: 16.h),
                child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(32.w),
                        border: Border.fromBorderSide(BorderSide(
                            color: Color(controller.canSendCode.value
                                ? 0xFF1774E0
                                : 0xFF999999),
                            width: 2.w))),
                    width: 216.w,
                    alignment: Alignment.center,
                    child: Text(
                      controller.canSendCode.value
                          ? "发送验证码"
                          : "${controller.countDown}s",
                      style: TextStyle(
                          fontSize: 32.sp,
                          color: Color(controller.canSendCode.value
                              ? 0xFF1774E0
                              : 0xFF999999)),
                    )),
              ),
            ),
          ),
        ),
      ),
    );
  }

  ///按钮组件
  _buildBottomWidget(ForgetPwdController controller) {
    return Obx(
      () => CustomButton(
          text: controller.isInputPhonePage.value ? "发送验证码" : "确定",
          isAsh: controller.isButtonAsh.value,
          width: 622.w,
          height: 96.h,
          onPressed: () => controller.isInputPhonePage.value
              ? controller.getCode()
              : controller.buildResetPwdPage()),
    );
  }
}
